a11y(1.4.13): migrate saved-query nav tooltips to Tooltip primitive by rosanusi · Pull Request #3607 · temporalio/ui

rosanusi · 2026-06-29T14:09:01Z

Summary

Replaces the hand-rolled JS-positioned tooltips in the saved-query nav rail (saved-query-views.svelte) and standalone-activities saved-views rail (saved-views.svelte) with the Holocene Tooltip primitive (PR #3429).

Each file maintained ~40 lines of custom positioning state and DOM logic that failed three SC 1.4.13 sub-criteria:

Sub-criterion	Before	After
Dismissible (Escape closes without moving focus)	Fails — no Escape handler	Passes — primitive's `svelte:window` keydown handler; `dismissed` flag auto-resets on leave
Hoverable (pointer can move from trigger onto tooltip)	Fails — pointer crossing the wrapper boundary fired `onmouseleave` before reaching the `position: fixed` div	Passes — primitive's 120 ms `HOVER_HIDE_DELAY_MS` + `mouseenter` on the popover cancels the hide timer
Persistent on focus	Passes (post-2.1.1 fix)	Passes — `focusin`/`focusout` in primitive
`role="tooltip"` (4.1.2)	Fails — plain `<div role="tooltip">` with no `aria-describedby` on trigger	Passes — primitive wires `aria-describedby` on wrapper, `role="tooltip"` + `id` on popover

Net change: ~80 lines removed across two files; 18 lines added (Tooltip wrapper + import).

What changed

src/lib/pages/saved-query-views.svelte: removed showTooltip, tooltipText, tooltipX/Y, positionTooltipFrom, onQueryBtnEnter/Move/Leave, inline portal function, and floating <div use:portal>. Replaced wrapper <div> in queryButton snippet with <Tooltip text={…} right usePortal hide={$savedQueryNavOpen}>.
src/lib/components/standalone-activities/saved-views.svelte: same migration; text={view.name} (no task-failures special-casing needed here).

hide={$savedQueryNavOpen} preserves the existing gate: tooltip suppressed when the nav rail is expanded (full name already visible in the button label).

usePortal delegates positioning to the Portal/Floating-UI integration, replacing the manual getBoundingClientRect arithmetic and also closing the 1.4.4 fixed-pixel-width/zoom gap on the same surface.

Dependencies

Tooltip primitive: PR fix(a11y): make Tooltip keyboard-accessible, dismissible, and hoverable #3429 — must be merged first for right, usePortal, hover-bridge, Escape, and aria-describedby to be available.

Test plan

Keyboard:

Collapse the saved-query nav rail. Tab through query buttons. Tooltip appears on focus with full (untruncated) name.
Press Escape with tooltip visible. Tooltip dismisses without focus moving.
Tab to next button. New tooltip appears. Shift+Tab back — tooltip re-appears (dismissed auto-resets).

Pointer:

Hover a query button. Tooltip appears.
Move pointer diagonally onto tooltip content. Tooltip stays open (Hoverable criterion).
Move pointer off both. Tooltip closes.

Screen reader:

VoiceOver / NVDA: focus a query button. Tooltip text announced via aria-describedby.

Regression:

$savedQueryNavOpen = true (expanded rail): no tooltip appears.
Tab order unchanged — tabindex="-1" wrapper still skipped; inner <Button> is the focus stop.
Tooltip visually appears to the right of the trigger button, centered vertically.

References

Audit doc: audit-output/issues/1.4.13-saved-query-hand-rolled-tooltip.md
Tooltip primitive: PR fix(a11y): make Tooltip keyboard-accessible, dismissible, and hoverable #3429
WCAG 1.4.13: https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus

A11y-Audit-Ref: 1.4.13-saved-query-hand-rolled-tooltip

🤖 Generated with Claude Code

Replaces the hand-rolled JS-positioned tooltip in saved-query-views.svelte and standalone-activities/saved-views.svelte with the Holocene Tooltip primitive (PR #3429). Each file previously maintained ~40 lines of custom state and DOM positioning logic (showTooltip, tooltipText, tooltipX/Y, positionTooltipFrom, onQueryBtnEnter/Move/Leave, use:portal floating <div>) that failed three SC 1.4.13 sub-criteria: - Dismissible: no Escape handler - Hoverable: pointer crossing the wrapper boundary fired onmouseleave before reaching the fixed <div>, dismissing the tooltip - ARIA: plain <div role="tooltip"> with no aria-describedby on the trigger The Tooltip primitive supplies all three: - Escape-to-dismiss via svelte:window keydown (dismissed flag auto-resets) - Hover bridge: 120 ms HOVER_HIDE_DELAY_MS lets the pointer transit onto the Portal-rendered popover; mouseenter on the popover cancels the hide timer - aria-describedby on the wrapper <div>; role="tooltip" + id on the popover hide={$savedQueryNavOpen} preserves the existing gate: tooltip is suppressed while the nav rail is expanded (full name already visible). usePortal delegates positioning to the Portal/Floating-UI integration, replacing the manual getBoundingClientRect arithmetic and also closing the 1.4.4 fixed-pixel-width gap on that surface. Net: ~80 lines removed across two files; no new lines of tooltip logic added. A11y-Audit-Ref: 1.4.13-saved-query-hand-rolled-tooltip Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel · 2026-06-29T14:09:08Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
holocene	Ready	Preview, Comment	Jul 13, 2026 3:43pm

temporal-cicd · 2026-06-29T14:10:22Z

	Warnings
⚠️	📊 Strict Mode: 5 errors in 3 files (0.6% of 895 total) src/lib/holocene/tooltip.svelte (1) L59:13: Type 'null' is not assignable to type '"search" \| "link" \| "success" \| "error" \| "action" \| "activity" \| "add-square" \| "add" \| "apple" \| "archives" \| "arrow-down" \| "arrow-left" \| "arrow-up" \| "arrow-right" \| "ascending" \| ... 145 more ... \| "xmark-square"'. src/lib/components/standalone-activities/saved-views.svelte (1) L154:25: Argument of type 'string \| undefined' is not assignable to parameter of type 'string \| number \| boolean'. src/lib/pages/saved-query-views.svelte (3) L343:10: 'view.count' is possibly 'undefined'. L350:53: 'view.count' is possibly 'undefined'. L152:25: 'activeQueryView' is possibly 'undefined'.

Generated by 🚫 dangerJS against e609ab6

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Collapsed rail buttons render icon-only (name span is gated behind $savedQueryNavOpen), leaving the <button> with no accessible name — SR announces just "button". The tooltip conveys the label visually only. Add aria-label={view.name} so the focusable button has a stable name in both collapsed and expanded states. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

temporal-cicd · 2026-07-13T15:18:30Z

        class={merge(
-          'h-4 w-4 flex-shrink-0  transition-colors duration-200',
-          $savedQueryNavOpen ? 'lg:hidden' : '',
+          'flex w-full justify-start',


⚠️ 'view.count' is possibly 'undefined'.

temporal-cicd · 2026-07-13T15:18:30Z

+        disabled={view.disabled}
+        size="sm"
+      >
+        <Icon


⚠️ 'view.count' is possibly 'undefined'.

The share button's "Share" text span is gated behind $savedQueryNavOpen, so a collapsed rail leaves only the copy icon and no accessible name. Add aria-label="Share" so it announces in both states. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

ardiewen · 2026-07-13T15:26:01Z

Follow-up: accessible-name gap found during SR testing

VoiceOver testing surfaced that in the collapsed (icon-only) rail, the buttons had no accessible name — SR announced just "button". The tooltip conveys the label visually only, and aria-describedby alone (a description) doesn't satisfy Name/Role/Value for a nameless control. This pre-dates the migration but is the more severe issue (4.1.2 / 1.1.1) than the 1.4.13 hover fix.

Pushed:

05c30562 — restore max-w-[280px] on the tooltip (visual regression)
c9d0a9ad — aria-label on query buttons
936b4489 — aria-label on the share button

Save/Edit/New already render text (named); the chevron already has an aria-label. Count for Task Failures is intentionally kept out of the accessible name (fluctuating count in a name is disruptive for SR).

The Escape handler was a bubble-phase window listener, so it never received the event when the tooltip trigger stopped keydown propagation (e.g. Holocene Button's on:keydown|stopPropagation). Keyboard Escape therefore failed to dismiss saved-query nav tooltips. Capture-phase runs before the target's stopPropagation, fixing dismissal for all Button-triggered Tooltip consumers. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Auto-generated version bump from 2.52.0 to 2.52.1 Bump type: patch Changes included: - [`3be0df00`](3be0df0) fix(schedules): default absent second/minute/hour to 0 when editing (#3653) - [`508b65b7`](508b65b) fix(schedules): default emptied second/minute/hour to 0 on submit (#3655) - [`1f0e149c`](1f0e149) fix(workers): reject $LATEST qualifier in Lambda ARN validation (#3657) - [`b42b0776`](b42b077) a11y(2.4.3): inert-based focus containment + restore; drop trap from native dialogs (#3598) - [`cc491a29`](cc491a2) a11y(2.4.3): keep toast live region announcing during a focus trap [DT-4252] (#3654) - [`ddc7f8e2`](ddc7f8e) a11y(2.4.11): add scroll-padding so sticky overlays don't obscure focused elements (#3532) - [`b7e3a472`](b7e3a47) FilterBar icon update (#3660) - [`09318ec6`](09318ec) Add danger PR comment for api version bump (#3662) - [`273cc4be`](273cc4b) a11y(4.1.2): add label prop to Button primitive and enforce accessible names (#3556) - [`4507115f`](4507115) Use an editable combobox for the Cloud Run region field (DT-4232) (#3636) - [`694a7471`](694a747) a11y(1.4.13): migrate saved-query nav tooltips to Tooltip primitive (#3607) - [`8b384a40`](8b384a4) a11y(4.1.2): fix nested interactive elements in Copyable component (#3558) - [`1bfd2750`](1bfd275) fix describe SANO API requests to include runId parameter (#3661) - [`ba18b43e`](ba18b43) a11y(4.1.2): require label on CodeBlock primitive; add aria-readonly for read-only mode (#3557) - [`6e2290f1`](6e2290f) feat(deployments): make compute provider picker configurable (#3659) - [`4470b76a`](4470b76) fix(workers): persist WDV compute-config edits via update mask; revert $LATEST validation (#3658) - [`17fd591b`](17fd591) fix(nexus-operations): make start standalone nexus operation timeouts optional (#3656) Co-authored-by: rossedfort <11775628+rossedfort@users.noreply.github.com>

github-actions Bot added a11y Accessibility audit PR a11y:bucket-3 Bucket 3: engineer required a11y:sc-1.4.13 labels Jun 29, 2026

vercel Bot deployed to Preview June 29, 2026 14:09 View deployment

chore: fix prettier formatting on tooltip migration files

a8e87c8

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel Bot deployed to Preview June 29, 2026 15:03 View deployment

rosanusi marked this pull request as ready for review June 29, 2026 15:12

rosanusi requested a review from a team as a code owner June 29, 2026 15:12

fix: restore max width to avoid visual regression

05c3056

vercel Bot deployed to Preview July 6, 2026 18:42 View deployment

temporal-cicd Bot reviewed Jul 13, 2026

View reviewed changes

vercel Bot deployed to Preview July 13, 2026 15:26 View deployment

vercel Bot deployed to Preview July 13, 2026 15:43 View deployment

ardiewen approved these changes Jul 13, 2026

View reviewed changes

ardiewen merged commit 694a747 into main Jul 13, 2026
18 checks passed

ardiewen deleted the wcag/1.4.13-saved-query-tooltip-migration branch July 13, 2026 16:32

temporal-cicd Bot mentioned this pull request Jul 13, 2026

chore: bump version to 2.52.1 #3669

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

a11y(1.4.13): migrate saved-query nav tooltips to Tooltip primitive#3607

a11y(1.4.13): migrate saved-query nav tooltips to Tooltip primitive#3607
ardiewen merged 6 commits into
mainfrom
wcag/1.4.13-saved-query-tooltip-migration

rosanusi commented Jun 29, 2026 •

edited by ardiewen

Loading

Uh oh!

vercel Bot commented Jun 29, 2026 •

edited

Loading

Uh oh!

temporal-cicd Bot commented Jun 29, 2026 •

edited

Loading

Uh oh!

temporal-cicd Bot Jul 13, 2026

Uh oh!

temporal-cicd Bot Jul 13, 2026

Uh oh!

ardiewen commented Jul 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

rosanusi commented Jun 29, 2026 • edited by ardiewen Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What changed

Dependencies

Test plan

References

Uh oh!

vercel Bot commented Jun 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

temporal-cicd Bot commented Jun 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

temporal-cicd Bot Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

temporal-cicd Bot Jul 13, 2026

Choose a reason for hiding this comment

Uh oh!

ardiewen commented Jul 13, 2026

Follow-up: accessible-name gap found during SR testing

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rosanusi commented Jun 29, 2026 •

edited by ardiewen

Loading

vercel Bot commented Jun 29, 2026 •

edited

Loading

temporal-cicd Bot commented Jun 29, 2026 •

edited

Loading